<template>
	<div class="add-work-flow">
		<el-dialog title="创建人工坐席工作流" :visible.sync="showAddWorkFlow" width="50%" :before-close="closeAddWorkFlow">
			<el-form :model="workFlowForm" ref="ruleForm" label-width="100px">
				<el-form-item label="工作流名称" prop="name" label-width="100px" :rules="rules.workFlowNameRules">
					<el-input v-model="workFlowForm.name" placeholder="请输入工作流名称" class="el-input"></el-input>
				</el-form-item>
				<div class="flow-conent" v-for="(item, index) in workFlowForm.steps" :key="index">
					<el-form-item class="prop" :prop="'steps.' + index + '.name'" :rules="rules.workFlowConentRules" :label="`流程节点${index + 1} `" label-width="100px">
						<el-input v-model="item.name" placeholder="请输入当前需要完成的流程节点名称" class="el-input" maxlength="16"></el-input>
						<el-checkbox v-model="item.isDot" :label="item.isDot" class="pleft40">视频打点</el-checkbox>
						<i class="el-icon-close" @click="removeProp(index)" v-show="workFlowForm.steps.length > 1"></i>
					</el-form-item>
					<el-form-item class="prop" :prop="'steps.' + index + '.content'" :rules="rules.workFlowTipsRules" label-width="100px">
						<ZcoTextarea
							:value="item.content"
							placeholder="请输入当前流程节点的话术提示"
							minlength="1"
							maxlength="2000"
							type="textarea"
							:autosize="{ minRows: 1.5, maxRows: 2 }"
							@input="e => input(e, index)"
							:id="'humanflow_' + index + '_content'"
						/>
						<span class="add" @click="e => onAddVariable(index)">+</span>
					</el-form-item>
				</div>

				<el-form-item class="pleft10">
					<el-button @click="addProps">添加流程</el-button>
				</el-form-item>
				<div class="btn">
					<el-button @click="closeAddWorkFlow">取消</el-button>
					<el-button type="primary" @click="getAddWorkFlow">确认</el-button>
				</div>
			</el-form>
		</el-dialog>
		<!-- 用户变量 -->
		<UserAttribute v-if="isShowUserAttribute" :dialogVisible="isShowUserAttribute" taskId="" @on-ok="onChosseUserAttribute" @on-cancel="isShowUserAttribute = false" />
	</div>
</template>

<script>
import { validateWorkFlowName, validateWorkFlowVariable, validateFlowConent, validateVariableKey } from '@/utils/formValidate';
import ZcoTextarea from '../AiWorkFlow/components/TinymceTextarea.vue';
import UserAttribute from '../AiWorkFlow/AiTemplateView/UserAttribute.vue';
import { insertStr } from '@/utils/tool';
export default {
	components: { ZcoTextarea, UserAttribute },
	props: {
		showAddWorkFlow: {
			type: Boolean,
			required: true,
			default: () => false
		}
	},
	data() {
		return {
			workFlowForm: {
				// 工作流名称
				name: '',
				steps: [
					{
						content: '',
						isDot: 0,
						name: ''
					}
				],
				variables: [],
				variable: {
					key: '',
					name: ''
				}
			},
			// 勾选的变量
			checkedVaribles: [],
			isShowUserAttribute: false,
			currentVariableInput: '',
			// 校验规则
			rules: {
				workFlowNameRules: [
					{ required: true, message: '请输入工作流名称', trigger: ['blur'] },
					{ validator: validateWorkFlowName, trigger: ['change'] }
				],
				workFlowConentRules: [
					{ required: true, message: '请输入流程节点', trigger: ['blur'] },
					{ validator: validateFlowConent, trigger: ['blur'] }
				],
				workFlowTipsRules: [{ required: true, message: '请输入流程节点的话术提示', trigger: ['blur'] }]
			}
		};
	},
	computed: {},
	mounted() {},

	methods: {
		// 新增工作流初始化
		initAddWorkFlow() {
			this.workFlowForm.name = '';
			this.workFlowForm.steps = [{ content: '', isDot: 0, name: '' }];
			this.workFlowForm.variables = [];
			this.workFlowForm.variable = { key: '', name: '' };
		},
		// 关闭新增工作流模态框
		closeAddWorkFlow() {
			this.initAddWorkFlow();
			this.$emit('closeAddWorkFlow');
			this.$refs.ruleForm.resetFields();
		},
		getAddWorkFlow() {
			let data = {
				name: this.workFlowForm.name,
				variables: [],
				steps: this.workFlowForm.steps
			};
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					this.$emit('getAddWorkFlow', data);
				} else {
					return false;
				}
			});
		},
		removeProp(index) {
			this.workFlowForm.steps.splice(index, 1);
		},
		// 增加流程
		addProps() {
			this.workFlowForm.steps.push({ content: '', isDot: 0, name: '' });
		},
		input(e, index) {
			// console.log('input', e, index);
			this.workFlowForm.steps[index].content = e.trim();
			this.$refs.ruleForm.validateField('steps.' + index + '.content');
		},
		onAddVariable(index) {
			this.currentVariableInput = 'humanflow_' + index + '_content';
			this.isShowUserAttribute = true;
		},
		// 变量插入
		onChosseUserAttribute(data, businessData) {
			console.log('onChosseUserAttribute', this.currentVariableInput, data, businessData);
			let variable = '';
			let wordsDom = document.getElementById(this.currentVariableInput);
			if (!wordsDom) {
				wordsDom = document.getElementById(this.currentVariableInput + 'textarea');
			}
			if (data && data.name) {
				// 客户信息_角色名_变量名
				variable = `{{客户信息_${data.bizscenario_role.name}_${data.name}_${data.id}}}`;
				insertStr('', wordsDom, variable);
			}
			if (businessData && businessData.name) {
				// 业务信息_变量名
				variable = `{{业务信息_${businessData.name}_${businessData.id}}}`;
				insertStr('', wordsDom, variable);
			}

			this.isShowUserAttribute = false;
		}
	}
};
</script>

<style lang="less">
.add-work-flow {
	.el-checkbox__inner {
		border-radius: 50%;
	}
}
</style>

<style lang="less" scoped>
.add-work-flow {
	.head {
		padding: 20px 0;
	}
	.btn {
		text-align: right;
	}
	.prop {
		width: 100%;
		.el-input {
			width: 90%;
		}
	}
	.el-icon-close {
		padding-left: 10px;
		cursor: pointer;
	}
	.el-input {
		width: 280px !important;
	}
	.add {
		position: absolute;
		right: 10px;
		top: 15px;
		color: #888;
		font-size: 20px;
		height: 20px;
		line-height: 20px;
		cursor: pointer;
	}
	.pleft40 {
		padding-left: 30px;
	}
	.pleft20 {
		padding-left: 20px;
	}
	.pleft10 {
		padding-left: 10px;
	}
	.right {
		margin-left: 100px;
	}
	.mtop {
		margin-top: 10px;
	}
	.pleft10 {
		padding-left: 10px;
	}
}
.create-el-dailog {
	.addvariable {
		background-color: #f8f8f8;
		.el-form-item:nth-child(1) {
			padding-top: 20px;
		}
		.el-form-item:nth-child(2) {
			padding-top: -30px;
		}
	}
	.addvariable_input {
		width: 300px;
	}
	.addvariable_btn {
		text-align: right;
		margin-top: 40px;
	}
	.addvariable_fontsize {
		display: block;
		margin-left: 270px;
		padding-bottom: 20px;
	}
	.addvariable_fontsize_jianju {
		padding: 0 43px;
	}
	.el-checkbox-group {
		margin-top: -30px;
	}
}
</style>
